<template>
	<view class="content">
    <u-gap height="40px"/>
    <view class="top-box" >
      <view class="logo"><image :src="logo" style="height: 200px;width: 200px;border-radius: 50px"/></view>
      <view class="appName">{{ appName }}</view>
      <view class="version">{{version}}</view>
    </view>


    <view class="menu-box">
      <view class="option">
        <view>当前版本</view>
        <view>{{version}}</view>
      </view>
      <view class="option" @click="toPolicy('用户协议')">
        <view>用户协议</view>
        <view ><u-icon name="arrow-right"/></view>
      </view>
      <view class="option" @click="toPolicy('隐私政策')">
        <view>隐私协议</view>
        <view><u-icon name="arrow-right"/></view>
      </view>
      <view class="option" @click="showConfirmLogoutDialog=true">
        <view>注销账号</view>
        <view><u-icon name="arrow-right"/></view>
      </view>
    </view>

    <tn-modal v-model="showConfirmLogoutDialog" :title="'注销提醒'" :content="'确定注销账号？'" :button="button" @click="clickModal"></tn-modal>

	</view>
</template>

<script>
	import UGap from "../../uni_modules/uview-ui/components/u-gap/u-gap.vue";
  import UIcon from "../../uni_modules/uview-ui/components/u-icon/u-icon.vue";
  import UButton from "../../uni_modules/uview-ui/components/u-button/u-button.vue";
  import {toast} from "../../utils/utils";
  import Config from "../../utils/config";

	export default {
		components: {
      UButton,
      UIcon,
      UGap
    },
		data() {
			return {
        logo:"https://mp-6c5504f1-e764-42f7-a299-946eaad4da31.cdn.bspapp.com/2024/03/25/37936683-86413441-v1_logo.png",
        appName:Config.appName,
        version: 'v1.1.1',

        showConfirmLogoutDialog:false,
        button: [{
          text: '取消',
          backgroundColor: '#FFF',
          fontColor: '#000',
        },
          {
            text: '确定',
            backgroundColor: '#FFF',
            fontColor: '#FF5A5A'
          }
        ]
			}
		},
		async onShow() {
		},
		methods: {
      clickModal(data) {
        if (data.index==0) {
          this.showConfirmLogoutDialog=false;
          return;
        }
        this.logout();
      },
      exit() {
        // #ifdef APP-PLUS
        // vk.myfn.exit()
        // #endif
      },
      open(){},
      close(){this.showConfirmLogoutDialog=false},
      confirm(){
        console.log("确定注销")
        this.showConfirmLogoutDialog=false
        this.logout();
      },
      async logout(){ //注销
        let res = await this.$api.distoryAccount({})
        toast('注销成功');
        uni.switchTab({
          url: "/pages/index/index"
        })
      },
      toPolicy(type) {
        let url = "https://playlet.gxdamiao.cn/policy/h5_v1/"+type+".html"
        // #ifdef APP-PLUS
        plus.runtime.openURL(url);
        // #endif
        // #ifdef H5
        window.location.href=url
        // #endif
      },
		}
	}
</script>

<style lang="scss" scoped>
  .content {
    background-color: #F5EFEF;
    min-height: 1000px;
  }
  .top-box {
    .logo {
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding:10px
    }
    .appName{
      display: flex;
      flex-direction: row;
      justify-content: center;
      font-size: 18px;
      margin: 5px;
      font-weight: bold;
    }
    .version {
      display: flex;
      flex-direction: row;
      justify-content: center;
      color: #989898;
      font-weight: bold;
    }
  }
  .menu-box {
    background-color: #FFFFFF;
    margin: 20px;
    padding: 20px;
    border-radius: 20px;
    .option {
      display: flex;
      justify-content: space-between;
      margin:10px
    }
  }

</style>
